<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<link href="${resource(dir: 'css', file: 'elastislide.css')}" type="text/css" media="all" rel="stylesheet" />
    
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'modernizr.custom.17475.js')}"></script>
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'chatRoom.js')}"></script>

<meta name="layout" content="guest"/>
</head>
<body>
<!-- profile page starts here-->   
 <div class="profile_container">
 
  <div class="wrapper">
          
            <div id="v-nav">
                <ul>
                    <li tab="tab1" class="first current">MY DETAILS</li>
                    <li class="" tab="tab2">PHOTOS</li>
                    <li class="" tab="tab3">PRIVATE MESSAGE</li>
                    <li tab="tab4" class="last">BUY CREDITS</li>
                </ul>

                <!-- tab one starts here-->
                <div style="display: block;" class="tab-content">
                  <table width="96%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="50%" align="left" valign="top">&nbsp;</td>
                      <td width="5%" align="left" valign="top">&nbsp;</td>
                      <td width="46%" align="left" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                        <tr>
                          <td>
                          	<g:if test="${modelInstance?.pictureUri}">
							    <img src="${createLink(controller:'landing' , action:'profileImageUpload' , params:['pictureUri': modelInstance.pictureUri ])}" width="420" height="320" border="1px solid #000000"/>
						    </g:if>
						    <g:else>
						    	<img src="${resource(dir: 'images', file: 'blank-profile.png')}" width="420" height="320" border="1px solid #000000" />
						    </g:else>
                          </td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td class="inner_model_name">Katherine Knowles</td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td>
                          <div class="sublinks">
                          	<ul>
                          		<g:if test="${modelInstance?.id == userInstance?.id}">
                          		<li><g:link controller = "home" action="completeProfile">COMPLETE PROFILE</g:link></li>
                          		</g:if>
                            	<li><a href="#">GO PRIVATE</a></li>
                            	<g:if test="${isModel}">
                                <li>
                                	<a href="javascript:void(0)" onclick="chatroom.submitForm($('#enterChatForm'))">ENTER CHAT ROOM</a>
                                	<g:form controller="chat" action="chatRoom" name="enterChatForm" method="POST">
                                		<g:hiddenField name="modelId" value="${modelInstance.id}" />
                                	</g:form>
                                </li>
                                </g:if>
                                <li><a href="#">GROUP SHOW</a></li>
                                <li><a href="#">SPY</a></li>
                            </ul>
                          </div>
                          </td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <!-- tr>
                          <td>
                          	<div class="prev_next_model">
                            	<ul>
                                	<li><a href="#"><span><img src="images/prev_arrow.png" width="16" height="10"></span>PREV MODEL</a></li>
                                    <li><a href="#">PREV MODEL<span><img src="images/next_arrow.png" width="16" height="10"></span></a></li>
                                    
                                </ul>
                            </div>
                          </td>
                        </tr-->
                      </table></td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">
                      
                      <table width="100%" border="0" align="left" cellpadding="10" cellspacing="0">
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_headings">GENERAL INFO</td>
                          <td align="left" valign="middle">&nbsp;</td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Country:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:if test="${modelProfile?.country}"><g:country code="${modelProfile.country}"/></g:if></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Body:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="bodyType"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Ethnic Group:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="ethinicity"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Weight:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="weight"/> <g:fieldValue bean="${modelProfile}" field="weightUnit"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Height:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="height"/> <g:fieldValue bean="${modelProfile}" field="heightUnit"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Hair Length:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="hair"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Hair Color:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="hair"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Eye Color:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="eyeColor"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Age:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline">${modelProfile?.birthDate?.age} years</td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_bottomline">Orientation:</td>
                          <td width="50%" align="right" valign="middle" class="info_bottomline"><g:fieldValue bean="${modelProfile}" field="sexualPref"/></td>
                        </tr>
                        <tr>
                          <td width="50%" align="left" valign="middle" class="info_headings">MINI BIO</td>
                          <td width="50%" align="right" valign="middle">&nbsp;</td>
                        </tr>
                        <tr>
                          <td colspan="2" align="left" valign="middle"><g:fieldValue bean="${modelProfile}" field="moreAboutMe"/></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table>
  </div>
                <!-- tab one ends here-->
                
                <!-- tab two starts here-->
              <div style="display: none;" class="tab-content" >
              <table width="96%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>Photos here</td>
  </tr>
</table>

              </div>
                <!-- tab two ends here-->
                
                <!-- tab three starts here-->
              <div style="display: none;" class="tab-content">
               <table width="96%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>Private Message here</td>
  </tr>
</table>
              </div>
                <!-- tab three ends here-->
                
                <!-- tab four starts here-->
              <div style="display: none;" class="tab-content">
               <table width="96%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>Buy Credits here</td>
  </tr>
</table>
              </div>
                <!-- tab four ends here-->
                
                <div>
					<!-- Elastislide Carousel -->
					<ul id="carousel" class="elastislide-list">
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
					</ul>
					<!-- End Elastislide Carousel -->
				</div>

            </div>
        </div>

<div>
  				
</div>

 </div>
 <!-- prifle page ends here-->
 </body>
</html>
 